<template>
  <div>
    <Button icon="ios-add-circle" type="primary" @click="modal1 = true">添加新员工</Button>
    <Modal
      v-model="modal1"
      title="添加新员工"
      :styles="{top: '25px'}">
      <Form :model="formItem" :label-width="80">
        <FormItem label="姓名">
          <Input v-model="formItem.name" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="账号">
          <Input v-model="formItem.account" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="密码">
          <Input v-model="formItem.password" type="password" placeholder="默认密码123456"></Input>
        </FormItem>
        <FormItem label="身份证">
          <Input v-model="formItem.numberId" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="性别">
          <RadioGroup v-model="formItem.sex">
            <Radio label=1>男</Radio>
            <Radio label=0>女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="电话">
          <Input v-model="formItem.phone" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="邮箱">
          <Input v-model="formItem.email" placeholder="Enter something..."></Input>
        </FormItem>
        <FormItem label="生日">
          <DatePicker placeholder="Select time" v-model="formItem.birth"></DatePicker>
        </FormItem>
        <FormItem label="用户状态">
          <RadioGroup v-model="formItem.status">
            <Radio label=1>正常</Radio>
            <Radio label=0>停用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="职位">
          <Select v-model="formItem.uroleId">
            <Option v-for="(role,i) in roles" :value="role.uroleId" :key="i">{{role.uroleName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="所属部门">
          <Select v-model="formItem.corganId">
            <Option v-for="(organization,i) in organizations" :value="organization.corganId" :key="i">{{organization.corganName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="submit" type="primary">提交</Button>
        <Button @click="resetForm" type="primary">重置</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {addEmployee, getAllDepartment_, getAllRole_} from "../../../../api/data";

export default {
  data() {
    return {
      modal1: false,
      formItem: {
        name: '',
        account: '',
        uroleId: 0,
        password: '',
        numberId: '',
        sex: 1,
        phone: '',
        email: '',
        birth: '',
        status: 1,
        corganId: 0,
      },
      organizations:[
      ],
      roles:[
      ],
    }
  },
  methods: {
    ok() {
      this.$Message.info('Clicked ok');
    },
    cancel() {
      this.$Message.info('Clicked cancel');
    },
    getAllDepartment(){
      getAllDepartment_().then(res=>{
        this.organizations=res.data.obj;
      }).catch(err=>{
        alert(err.data.message)
      })
    },
    getAllRole(){
      getAllRole_().then(res=>{
        this.roles=res.data.obj;
      }).catch(err=>{
        alert(err.data.message)
      })
    },
    submit(){
      console.log(this.formItem)
      addEmployee(this.formItem).then(res=>{
        if (res.data.code==500){
          this.$Message.info(res.data.message);
        }else{
          this.$Message.info("添加成功");
          this.modal1=false;
        }
      }).catch(err=>{
      })
    },
    resetForm(){
      this.formItem={
          name: '',
          account: '',
          uroleId: 0,
          password: '',
          numberId: '',
          sex: 1,
          phone: '',
          email: '',
          birth: '',
          status: 1,
          corganId: 0,
      }
    }
  },
  mounted() {
    this.getAllDepartment()
    this.getAllRole()
  }
}
</script>

<style scoped>

</style>
